<template>
  <!-- 文章栏目 -->
  <div>
    <el-button
      icon="el-icon-plus"
      size="small"
      type="primary"
      @click="handleAdd"
      >添加</el-button
    >

    <el-table
      :data="tableData"
      style="width: 100%"
      border
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column fixed prop="id" label="Id" width="180"></el-table-column>
      <el-table-column
        prop="classify"
        label="栏目名称"
        width="180"
      ></el-table-column>
      <el-table-column label="是否禁用" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isActived"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="handleAmend(scope.$index, scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="添加时间"
        width="180"
      ></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-delete"
            type="danger"
            size="mini"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageIndexChange"
        :current-page="pager.pagerIndex"
        :page-size="pager.pagerSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
        background
      >
      </el-pagination>
    </div>

    <el-dialog title="添加栏目" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="栏目名称" :label-width="formLabelWidth">
          <el-input v-model="formData.classify" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getArticleClassifyList,
  setArticleActived,
  addclassify
} from '../../api/classify'
import formatTime from '../../utils/formatTime'
export default {
  data () {
    return {
      tableData: [],
      formData: {
        classify: ''
      },
      pager: {
        pagerIndex: 1,
        pagerSize: 10,
        rowsTotal: 1
      },
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    // 添加
    handleAdd () {
      this.dialogFormVisible = true
      this.formData.classify = ''
    },
    // 取消
    handleCancel () {
      this.dialogFormVisible = false
    },
    // 确定
    async handleSave () {
      this.dialogFormVisible = false
      const res = await addclassify({
        articleClassName: this.formData.classify
      })
      if (res.data.code === 200) {
        this.tableData.unshift({
          id: res.data.data.id,
          classify: res.data.data.articleClassName,
          isActived: res.data.data.isActived,
          addTime: formatTime(res.data.data.createdTime)
        })
        this.$message.success('创建栏目成功')
      } else {
        this.$message.error('添加失败')
      }
      // console.log(res)
      // this.tableData.splice(0, 0, this.formData);
      // console.log(this.formData);
    },
    // 禁用或启用
    async handleAmend (index, row) {
      // console.log(row.id)
      // console.log(row)
      const res = await setArticleActived(row.id, { isActived: row.isActived })
      if (res.data.code === 200) {
        this.$message.success('更改成功')
      } else {
        this.$message.error('修改失败')
      }
      // console.log(res)
    },
    // 删除
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await setArticleActived(row.id, {
            isActived: row.isActived,
            isDeleted: true
          })

          if (res.data.code === 200) {
            this.tableData.splice(index, 1)
            this.$message.success('更改成功')
          } else {
            this.$message.error('修改失败')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      console.log(index, row)
    },
    // 获取后台数据
    async fetchData (
      pager = {
        pageIndex: this.pager.pagerIndex,
        pageSize: this.pager.pagerSize
      }
    ) {
      const res = await getArticleClassifyList(pager)

      res.data.data.forEach((item) => {
        this.tableData.push({
          id: item.id,
          classify: item.articleClassName,
          isActived: item.isActived,
          addTime: formatTime(item.createdTime)
        })
      })

      console.log(res)
    },
    // 分页页面大小
    handlePageSizeChange (val) {
      this.pager.pageSize = val
      // console.log(val)
      this.fetchData()
    },
    // 分页页码
    handlePageIndexChange (val) {
      this.pager.pagerIndex = val
      // console.log(val)
      this.fetchData()
    }
  }
}
</script>

<style>
</style>
